<template>
    <div class="u-p-20">
        <el-card shadow="never">
            <div slot="header">
                <span>
                    <b class="u-f-16">代理商列表</b>
                </span>
                <router-link :to="{name:'agencyEdit'}" v-if="hasPerm('agencyEdit')">
                    <el-button type="danger" size="small" icon="el-icon-plus" class="u-right u-5mt" round>添加代理商</el-button>
                </router-link>
            </div>

            <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
                <el-form-item label="启用状态">
                    <el-select v-model="queryForm.status" clearable>
                        <el-option label="全部" value></el-option>
                        <el-option label="启用" value="1"></el-option>
                        <el-option label="未启用" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="代理商名称">
                    <el-input v-model="queryForm.keyword" placeholder="输入代理商名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData" class="u-mt-10" v-viewer>
                <el-table-column label="id" prop="id" width="100"></el-table-column>
                <el-table-column label="代理商图片">
                    <template slot-scope="scope">
                        <el-image style="max-width:80px" :src="scope.row.agency_head_img" :data-src="scope.row.agency_head_img"
                            fit="cover" lazy></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="代理商名称" prop="agency_title"></el-table-column>
                <el-table-column label="代理商个人姓名" prop="agency_name"></el-table-column>
                <el-table-column label="代理商账号" prop="agency_login_username"></el-table-column>
                <el-table-column label="范围（Km）" prop="agency_range"></el-table-column>
                <el-table-column label="下单数" prop="order_num"></el-table-column>
                <el-table-column label="收益总额" prop="cons_all"></el-table-column>
                <el-table-column label="收益信息" v-if="hasPerm('agencyEarnings')">
                    <template slot-scope="scope">
                        <el-button @click.native="handleRoute(scope.row.id,'agencyEarnings')" v-if="hasPerm('agencyEarnings')" size="mini" type="success">{{scope.row.earnings_num}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="订单列表" v-if="hasPerm('agencyOrderList')">
                    <template slot-scope="scope">
                        <el-button @click.native="handleRoute(scope.row.id,'agencyOrderList')" v-if="hasPerm('agencyOrderList')" size="mini" type="success">{{scope.row.order_num}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="代理用户" v-if="hasPerm('agencyUser')">
                    <template slot-scope="scope">
                        <el-button @click.native="handleRoute(scope.row.id,'agencyUser')" v-if="hasPerm('agencyUser')" size="mini" type="success">{{scope.row.user_num}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用">
                    <template slot-scope="scope" v-if="hasPerm('agencyStatusBtn')">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" active-color="#13ce66"
                            @change="handleStatus(scope.row.id,scope.row.status)"></el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="代理商地址">
                    <template slot-scope="scope">
                        <el-tag>{{ scope.row.agency_province }}-{{ scope.row.agency_city }}-{{ scope.row.agency_county }}</el-tag>
                        <br />
                        <el-tag>详细地址:{{ scope.row.agency_detail_address }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="添加日期" prop="create_time" sortable></el-table-column>
                <el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click.native="handleRoute(scope.row.id,'agencyEdit')" v-if="hasPerm('agencyEdit')" type="text" size="small">编辑</el-button>
                        <el-button @click.native="handleDelete(scope.row.id)" v-if="hasPerm('agencyDelBtn')" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                操作
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="handleRoute(scope.row.id,'agencyEdit')" v-if="hasPerm('agencyEdit')">
                                    <el-button size="mini" type="text">编辑</el-button>
                                </el-dropdown-item>

                                <el-dropdown-item @click.native="handleRoute(scope.row.id,'agencyEarnings')" v-if="hasPerm('agencyEarnings')">
                                    <el-button size="mini" type="text">收益信息</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="handleRoute(scope.row.id,'agencyOrderList')" v-if="hasPerm('agencyOrderList')">
                                    <el-button size="mini" type="text">订单列表</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="handleRoute(scope.row.id,'agencyUser')" v-if="hasPerm('agencyUser')">
                                    <el-button size="mini" type="text">代理用户</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="handleRoute(scope.row.id,'agencyGoodsIndex')" v-if="hasPerm('agencyGoodsIndex')">
                                    <el-button size="mini" type="text">商品管理</el-button>
                                </el-dropdown-item>

                                <el-dropdown-item @click.native="handlePassword(scope.row.id)" v-if="hasPerm('agencyPassBtn')">
                                    <el-button size="mini" type="text">密码修改</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="handleDelete(scope.row.id)" v-if="hasPerm('agencyDelBtn')">
                                    <el-button size="mini" type="text">删除</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column> -->
            </el-table>

            <div class="u-mt-20 u-text-center">
                <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
            </div>
        </el-card>

        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
            <el-input v-model="pass_info.password"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEditPassword">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import commonPage from "@/mixins/common-page";
    export default {
        mixins: [commonPage],
        data() {
            return {
                apiName: "agency",
                queryForm: {
                    status: "",
                    keyword: ""
                },
                dialogVisible: false,
                pass_info: {
                    id: "",
                    password: ""
                }
            };
        },
        methods: {
            handlePassword(id) {
                this.dialogVisible = true;
                this.pass_info.id = id;
            },
            confirmEditPassword() {
                //确认修改密码

                this.$confirm("确认修改密吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        this.$api[this.apiName].editpwd(this.pass_info).then(response => {
                            if (response.code == 1) {
                                this.dialogVisible = !this.dialogVisible; //关闭输入框
                                this.$message({
                                    type: "success",
                                    message: "修改成功!"
                                });
                                this.onLoad();
                            }
                        });
                    })
                    .catch(() => {});
            }
        }
    };
</script>
